<!DOCTYPE html>
<html lang="zh-cn">
	<head>
		<meta charset="UTF-8">
		<title class="title">[文件管理器]</title>
		<meta name="viewport"
			content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
		<style type="text/css">
			.content {
				background: transparent;
			}

			.fixed {
				position: fixed;
				bottom: 0;
				left: 0;
				right: 0;
				width: 100%;
			}

			.content .mask {
				top: 0;
				background: rgba(0, 0, 0, .4);
				z-index: 90;
			}

			.content .file-content {
				padding: 20px 0;
				box-sizing: border-box;
				z-index: 91;
				height: 250px;
				background: #fff;
				border-radius: 20px 20px 0 0;
				overflow: hidden;
				text-align: center;
			}

			.btn {
				position: relative;
			}

			.btn .file {
				margin: auto;
				position: absolute;
				z-index: 93;
				left: 0;
				right: 0;
				top: 0;
				bottom: 0;
				height: 100px;
				width: 100px;
				opacity: 0;
			}

			.btn-bg {
				margin: auto;
				background: url(../../static/iconPdf1.png) no-repeat;
				background-size: 100%;
				color: #fff;
				width: 80px;
				height: 80px;
				border: 0;
				border-radius: 5px;
			}

			.tis {
				top: 0%;
				z-index: 95;
				display: none;
				justify-content: center;
				align-items: center;
			}

			.tis .tis-content {
				background: #fff;
				width: 60%;
				border-radius: 10px;
				padding: 20px 0;
			}

			.tis .tis-content img {
				width: 50px;
				height: 50px;
			}

			.tis-progress {
				margin: 10px 0;
				color: #999;
			}

			.cancel-btn {
				margin-top: 30px;
				height: 30px;
				line-height: 1;
				padding: 0 2em;
				background: #e3e3e3;
				color: #898989;
				border: 0;
				border-radius: 5px;
			}

			.title1 {
				color: #898989;
				margin-bottom: 30px;
			}
		</style>
	</head>

	<body>
		<div class="content" style="opacity: 1;">
			<div class="fixed mask"></div>
			<div align="center" class="fixed tis">
				<div class="tis-content">
					<div class="logo"></div>
					<div class="tis-progress">
						努力上传中..
					</div>
					<div class="cancel">
						<button class="cancel-btn">取消上传</button>
					</div>
				</div>
			</div>

			<div class="fixed file-content">
				<div class="title1">打开文件管理器</div>
				<div class="btn">
					<div class="btn-bg"></div>
					<input class="file" type="file" accept="application/pdf,image/*" />
				</div>
			</div>
		</div>
		<!-- 引入uniapp官方SDK -->
		<script type="text/javascript" src="https://js.cdn.aliyun.dcloud.net.cn/dev/uni-app/uni.webview.1.5.2.js">
		</script>
		<!-- 上传JS部分 -->
		<script type="text/javascript">
			document.addEventListener('UniAppJSBridgeReady', function() {
				var token = getUrlSearch("token") ? getUrlSearch("token") :
					'eyJhbGciOiJIUzUxMiJ9.eyJsb2dpbl91c2VyX2tleSI6ImRmZDM5N2U2LTVlNzQtNGI0My04YzU2LWE5Mzg3Mjg2MzQ4YiJ9.rZK42oSBeepq_Oi2LtVb58LXxz5Ta4Vi0mMZylNCPXw7oMWF1k_hUOJOh4sfwry4_k-EBaJL0KAhdL2zVt2b8g'
				let bodyDoc = document.body
				let mask = document.querySelector(".mask");
				let content = document.querySelector(".content");
				let fileDom = document.querySelector(".file");
				let progress = document.querySelector(".tis-progress");
				let tis = document.querySelector(".tis")
				let cancel = document.querySelector(".cancel-btn");
				let classify = getUrlSearch("classify") ? getUrlSearch("classify") : '0503'
				let uuid = getUrlSearch("uuid") ? getUrlSearch("uuid") : guid()
				//点击遮罩层关闭上传页面
				mask.addEventListener('click', disNone)
				function guid() {
					function S4() {
						return (((1 + Math.random()) * 0x10000) | 0).toString(16).substring(1);
					}
					return (S4() + S4() + "-" + S4() + "-" + S4() + "-" + S4() + "-" + S4() + S4() + S4());

				}
				//获得dom元素
				fileDom.addEventListener('change', (event) => {
					//监听input变化
					var reader = new FileReader();
					var file = fileDom.files[0];
					console.log(file)
					var xhr = new XMLHttpRequest();
					reader.readAsDataURL(file)
					tis.style.display = 'flex'
					//点击取消上传
					cancel.addEventListener("click", () => {
						console.log(1)
						xhr.abort();
						disNone()
					});
					reader.onload = function() {
						let str = reader.result // 解析后的数据，如下图
						str = str.split(';base64,')[1];
						console.log(str)
						//格式化请求数据
						let data = [{
							connectId: uuid,
							classify: classify,
							fileName: file.name,
							content: str
						}]
						//将文件加入到formdata中
						xhr.open('POST', //测试地址172.17.14.37:10008 线上地址10.0.5.120:80
							'http://172.17.14.37:10008/rmcp-service-app/api/appInterface/appAnnex/upload'
						);
						//正常请求
						xhr.setRequestHeader('Authorization', `Bearer ` + token);
						xhr.setRequestHeader('Content-Type', 'application/json');
						// xhr.setRequestHeader('Content-Type', 'multipart/form-data');
						
						//自定义header
						xhr.upload.addEventListener("progress", function(event) {
							if (event.lengthComputable) {
								let percent = Math.ceil(event.loaded * 100 / event.total) + "%";
								//实时监听文件上传的进度
								console.log(percent)
								//可以使用plus.storage.setItem()本地缓存来和vue页面进行通讯

							}
						}, false);

						xhr.send(JSON.stringify(data));

						xhr.onreadystatechange = function() {
							if (xhr.readyState == 4 && xhr.status == 200) {
								progress.innerText = '上传成功了';
								console.log(xhr.responseText);
								console.log(file.name, uuid)
								uni.postMessage({
									data: {
										action: '这是我传送的消息',
										fileName: file.name,
										uuid: uuid
									}
								});
								disNone()
								// location.href = 'index.html';
								//加载完成以后，调用一个页面自跳转，并且可以通过在vue界面调用this.wv.overrideUrlLoading()来截取并阻止这个跳转，达到在vue界面知道上传完成的情况
							} else {
								progress.innerText = '上传失败了';
								if (xhr.status == 0) {
									// alert('请检查请求头Content-Type与服务端是否匹配，并确认服务端已正确开启跨域');
								}
								uni.postMessage({
									data: {
										action: '这是我传送的消息',
										fileName: '',
										uuid: uuid
									}
								});
								disNone()
							}
						}
					}
				}, false);
				//从地址栏获取数据，例如请求token
				function getUrlSearch(name) {
					// 未传参，返回空
					if (!name) return null;
					// 查询参数：先通过search取值，如果取不到就通过hash来取
					var after = window.location.search;
					after = after.substr(1) || window.location.hash.split('?')[1];
					// 地址栏URL没有查询参数，返回空
					if (!after) return null;
					// 如果查询参数中没有"name"，返回空
					if (after.indexOf(name) === -1) return null;

					var reg = new RegExp('(^|&)' + name + '=([^&]*)(&|$)');
					// 当地址栏参数存在中文时，需要解码，不然会乱码
					var r = decodeURI(after).match(reg);
					// 如果url中"name"没有值，返回空
					if (!r) return null;

					return r[2];
				}
				//关闭index.html
				function disNone() {
					console.log(1,uuid)
					let time = setInterval(() => {
						content.style.opacity -= 0.1
						if (content.style.opacity <= 0) {
							clearInterval(time)
							plus.webview.currentWebview().close();
						}
					}, 10)
				}
			});
		</script>
	</body>

</html>
